import React, { useEffect, useState } from 'react';
import {
    Button,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Select,
    Image,
    message
} from 'antd';
import { bookAdd, bookUpdate } from '@/api/book';
import { useRouter } from 'next/router';
import style from './index.module.css'
import Content from '../Content';
import { getCategoryList } from '@/api/category';
import dayjs from 'dayjs';

export default function BookForm({ title, editData }: { title: string, editData: any }) {
    const [preview, setPreview] = useState('');
    const [form] = Form.useForm();
    const router = useRouter();
    const [bookOptions, setBookOptions] = useState([]);
    const handleSubmit = () => {
        form.validateFields().then(async (values) => {
            if (editData) {
                const { _id }: any = editData
                await bookUpdate(_id, values);
                message.success('更新成功');
                router.push('/book');
            } else {
                const res = await bookAdd(values);
                message.success('创建成功');
                router.push('/book');
            }
        });
    }
    useEffect(() => {
        if (editData) {
            editData.publishAt = dayjs(editData.publishAt)
            editData.category = editData.category?._id as any
            setPreview(editData.cover)
            form.setFieldsValue({ ...editData });
        }
        getCategoryList().then(res => {
            const categoryList = res.data.map((item: any) => {
                return {
                    label: item.name,
                    value: item._id
                }
            })
            setBookOptions(categoryList)
        })
    }, [title, editData]);
    return (
        <Content title={title}>
            <Form
                form={form}
                className={style.form}
                // {...formItemLayout}
                variant="filled"
                style={{ maxWidth: 600 }}
                onFinish={handleSubmit}>
                <Form.Item label="名称" name="name" rules={[{ required: true, message: 'Please input!' }]}>
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item label="作者" name="author" rules={[{ required: true, message: 'Please input!' }]}>
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item label="分类" name="category" rules={[{ required: true, message: 'Please input!' }]}>
                    <Select placeholder='请输入' allowClear options={bookOptions} />
                </Form.Item>
                <Form.Item label="封面" name="cover" rules={[{ required: true, message: 'Please input!' }]}>
                    <Input.Group compact>
                        <Input
                            placeholder='请输入'
                            style={{ width: 'calc(100% - 70px)' }}
                            onChange={(e) => { form.setFieldValue('cover', e.target.value) }}
                        />
                        <Button type="primary" onClick={(e) => { setPreview(form.getFieldValue('cover')) }}>预览</Button>
                    </Input.Group>
                </Form.Item>
                {preview && (
                    <Form.Item label='' colon={false} >
                        <Image src={preview} width={100} height={100} alt=''></Image>
                    </Form.Item>
                )}
                <Form.Item
                    label="出版日期"
                    name="publishAt"
                >
                    <DatePicker placeholder='选择' />
                </Form.Item>
                <Form.Item
                    label="库存"
                    name="stock"
                >
                    <InputNumber style={{ width: '100%' }} placeholder='请输入' />
                </Form.Item>

                <Form.Item
                    label="描述"
                    name="description"
                >
                    <Input.TextArea placeholder='请输入' />
                </Form.Item>

                <Form.Item>
                    <Button className={style.btn} type="primary" htmlType="submit">
                        {editData ? '更新' : '创建'}
                    </Button>
                </Form.Item>
            </Form>
        </Content>
    )
}


